<template>
  <view class="container">
    <view class="top">
      <view class="top-background"></view>
      <view class="user-info">
        <view class="user-avatar">
          <image :src="user.avatar" mode="aspectFill" />
        </view>
        <view class="user-details">
          <view class="user-name">{{ user.username }}</view>
          <view class="user-ID">{{ user.name }}</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="bottom-content">
        <view class="bottom-content-item" @click="gotoAddress">
          我的地址
        </view>
        <view class="bottom-content-item" @click="gotoMyFollow()">
          我的关注
        </view>
        <view class="bottom-content-item" @click="gotoOrder()">
          我的订单
        </view>
      </view>
    </view>
    <button class="quit-btn" @click="logout">退出登录</button>
  </view>
</template>

<style scoped>
.container {
  
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  background-color: #f9f9f9;
}
.top {
  width: 100%;
  background: linear-gradient(to right, #0099ff, #66ccff);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  height: 200px;
}
.user-info {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px 25px;
  display: flex;
  align-items: center;
  width: 300px;
}
.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}
.user-avatar image {
  width: 100%;
  height: 100%;
}
.user-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
.user-ID {
  font-size: 16px;
  color: #999;
}
.bottom {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  
}
.bottom-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.bottom-content-item {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}
.icon {
  width: 24px;
  height: 24px;
  background-color: #0099ff;
  border-radius: 50%;
  margin-right: 15px;
}
.quit-btn {
  width: 100%;
  padding: 12px;
  background-color: #0099ff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}
</style>
<script>
<<<<<<< HEAD
	import config from '../../config';
	export default {
	  data() {
	    return {
	      user: {
	        username: "",
	        name: "",
	        avatar: "",
	      },
	      userId: "",
	    };
	  },
	  methods: {
	    gotoMyFollow() {
	      uni.navigateTo({
	        url: "/pages/myfollow/index",
	      });
	    },
	    gotoOrder() {
	      uni.switchTab({
	        url: "/pages/order/index",
	      });
	    },
	    fetchUserData() {
	      uni.getStorage({
	        key: "ID",
	        success: (res) => {
	          this.userId = res.data;
	          uni.request({
	            url: config.URL+"/users",
	            method: "GET",
	            success: (response) => {
	              const currentUser = response.data.find(
	                (user) => user.id === this.userId
	              );
	              if (currentUser) {
	                this.user.username = currentUser.username;
	                this.user.name = currentUser.name;
	                this.user.avatar =
	                  currentUser.avatar ||
	                  "https://q7.itc.cn/q_70/images03/20241114/f96a2928a2614451be4d47518cee181d.jpeg";
	              }
	            },
	            fail: (error) => {
	              console.error("获取用户信息失败: ", error);
	            },
	          });
	        },
	      });
	    },
	    logout() {
	      uni.showModal({
	        title: "确认退出",
	        content: "你确定要退出登录吗？",
	        success: (res) => {
	          if (res.confirm) {
	            // 用户点击了确定
	            uni.removeStorage({
	              key: "ID",
	              success: () => {
	                uni.removeStorage({
	                  key: "token",
	                  success: () => {
	                    uni.showToast({
	                      title: "退出登录成功",
	                      icon: "success",
	                    });
	                    setTimeout(() => {
	                      uni.navigateTo({
	                        url: "/pages/login/index",
	                      });
	                    }, 1000);
	                  },
	                });
	              },
	            });
	          } else if (res.cancel) {
	            console.log("用户取消退出登录");
	          }
	        },
	      });
	    },
	    gotoAddress() {
	      uni.navigateTo({
	        url: "/pages/address/index",
	      });
	    },
	  },
	  onShow() {
	    this.fetchUserData();
	  },
	};
=======
import axios from "axios";

export default {
  data() {
    return {
      user: {
        username: "",
        name: "",
        avatar: "",
      },
      userId: "",
    };
  },
  methods: {
    gotoMyFollow(){
      uni.navigateTo({
        url: "/pages/myfollow/index",
      })
    },
    gotoOrder(){
      uni.switchTab({
        url: "/pages/order/index",
      })
    },
    fetchUserData() {
      uni.getStorage({
        key: "ID",
        success: (res) => {
          this.userId = res.data;
          axios.get("http://localhost:3000/users").then((response) => {
            const currentUser = response.data.find((user) => user.id === this.userId);
            if (currentUser) {
              this.user.username = currentUser.username;
              this.user.name = currentUser.name;
              this.user.avatar =
                currentUser.avatar ||
                "https://q7.itc.cn/q_70/images03/20241114/f96a2928a2614451be4d47518cee181d.jpeg";
            }
          }).catch((error) => {
            console.error("获取用户信息失败: ", error);
          });
        },
      });
    },
   logout() {
    uni.showModal({
        title: '确认退出',
        content: '你确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 用户点击了确定
                uni.removeStorage({
                    key: "ID",
                    success: () => {
                        uni.removeStorage({
                            key: "token",
                            success: () => {
                                uni.showToast({
                                    title: "退出登录成功",
                                    icon: "success",
                                });
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: "/pages/login/index",
                                    });
                                }, 1000);
                            }
                        });
                    }
                });
            } else if (res.cancel) {
               
                console.log('用户取消退出登录');
            }
        }
    });
},

gotoAddress() {
  uni.navigateTo({
    url: "/pages/address/index",
  });
}
      
  },
  onShow() {
    this.fetchUserData();
  },
};
>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
</script>